<template>
  <div>
    <div style="width: 180px; height: 300px" id="mychart1"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-liquidfill";
import { platformInfo } from "@/api/system/platform";
export default {
  data() {
    return {
      kxData: "",
      kxtimer:null,
    };
  },
  created() {
    // this.platformValue();
  },
  mounted() {
    this.initEcharts();
    this.refresh();
  },
  beforeDestroy(){
     this.stopRefresh();
  },
  methods: {
    refresh(){
       this.kxtimer=setInterval(() => {
        this.initEcharts();
       }, 120000);
    },
    stopRefresh(){
       clearInterval(this.kxtimer);
    },
    initEcharts() {
      // 多列柱状图
      platformInfo().then((res) => {
        this.kxData = Math.floor((res.data.zy / res.data.zs) * 100) / 100;
        var value = this.kxData;
        const mulColumnZZTData = {
          title: {
            text: "占用月台",
            textStyle: {
              color: "#fff",
              fontSize:20,
              fontWeight:'700',
              align: "center",
              baseline: "middle",
              position: "inside",
              verticalAlign: "middle",
            },
            left: "center",
            top: "5%",
          },
          series: [
            {
              type: "liquidFill",
              radius: "78.1%",
              center: ["50%", "40%"],

              color: [
                {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fc9755", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#f46100", // 100% 处的颜色
                    },
                  ],
                },
              ],
              data: [value, value], // data个数代表波浪数
              backgroundStyle: {
                borderWidth: 1,
                borderColor: "rgba(55, 211, 255, 0.42)",
                color: 'rgba(69, 229, 155)',
              },
              label: {
                normal: {
                  formatter: value,
                  textStyle: {
                    fontSize: 40,
                    color: "#fff",
                  },
                },
              },
              //  label: {
              //             formatter:
              //         },
              outline: {
                show: false,
              },
            },
          ],
        };
        const myChart = echarts.init(document.getElementById("mychart1"));
        myChart.setOption(mulColumnZZTData);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style>
</style>